<template>
	<view class="register-screen">
		<u-button shape="circle" type="default" class="register" hover-class="none" @click="userRegister">注册</u-button>
		<u-popup v-model="isShowRefister" mode="bottom" width="100%" height="50%" :closeable="true">
			<view class="screen">
				<view class="screen-text">注册</view>
				<view >
					<u-form :model="form" ref="uForm" class="in-msg">
						<u-form-item label="手机号" prop="mobile"label-width="200rpx">
							<u-input v-model="form.mobile" placeholder="手机号"/>
						</u-form-item>
						<u-form-item label="密码" prop="pass" label-width="200rpx">
							<u-input v-model="form.pass" type="password" placeholder="密码必须以字母开头"/>
						</u-form-item>
						<u-form-item label="昵称" prop="name" label-width="200rpx">
							<u-input v-model="form.name" type="text" placeholder="昵称"/>
						</u-form-item>
					</u-form>
				</view>
				<view class="login-register">
					<u-button shape="circle" class="login" hover-class="none" @click="submit">注册</u-button>
				</view>	
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {postRegister} from "network/login.js"
	
	export default{
		updated() {
			this.$refs.uForm.setRules(this.rules);	
		},
		data() {
			return {
				isShowRefister:false,
				form:{
						mobile:"",
						pass:"",
						name:""
					},
				rules: {
					mobile: [
						{ 
							required: true, 
							message: '请输入正确手机号', 
							pattern: /^1[3-9]\d{9}$/,
						}
					],
					pass: [
						{
							required: true, 
							pattern:/^[A-Za-z]\w{5,15}$/,
							message: '请输入正确密码', 
						}
					],
					name:[{
							required:true,
							pattern:/^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/,
							message:"请正确输入昵称"
					}]
				}
			}
		},
		components:{
		},
		methods:{
			userRegister(){
				this.isShowRefister = true
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						postRegister(this.form).then(res=>{
						uni.showToast({
						    title: res.data.msg,
						    duration: 2000,
							icon:'none'
						});
						this.isShowRefister = false
						})
					}
				});
			},
		}
	}
</script>

<style scoped>
	.register-screen{
		margin: 60rpx 20rpx 0rpx 20rpx;
	}
	.register{
		border-color:  #9d9e9e;
		width: 100%;
	}
	.screen{
		margin: 30rpx 20rpx ;
	}
	.screen-text{
		font-size: 60rpx;
		font-weight: bold;
	}
	.login-register{
		width: 100%;
		margin-top: 70rpx;
	}
	.login{
		width: 100%;
		color: #FFFFFF;
		font-size: 30rpx;
		background-color: #0C34BA;
	}
	.in-msg{
		margin-top: 70rpx;
	}
	.register{
		margin-top: 120rpx;
	}
</style>
